<!--
*@jk_repaymentPlan
*@author lijiaqi
*@date 2023/12/21 9:22
-->
<template>
  <div>
    <van-nav-bar title="还款计划" left-arrow @click-left="$router.back()"></van-nav-bar>
    <div class="loanBox">
      <!-- <ab-scroller v-if="InstanceStatus" url="/plugin/mobileBusiCenter/contractList" :params="{status: '00'}">
        <div slot-scope="slotScope"> -->
      <gz-default-page v-if="!dataList || dataList.length <= 0" :imageSize="'14.8rem'" :textSize="'1.4rem'" :text="'暂无记录'"></gz-default-page>
      <div class="product_main">
        <div v-for="(apply,index) in dataList" :key="apply.id">
          <!-- <router-link :to="{path:'/bpm/instanceDetail',query:{instanceId:apply.id,nodeId:'StartNoneEvent'}}"> -->
          <div class="loan-list-style">
            <div class="card-item">
              <!--              <span class="green">已还</span><span class="red">当期需还</span>-->
              <div class="item-title">{{ index + 1 }}/{{ dataList.length }} 期</div>
              <div class="item-value">{{ apply.MONTHLY_DUE }}</div>
            </div>
            <div class="card-item principal">
              <div class="item-title">{{ apply.REPAYMENT_TIME }}</div>
              <div class="item-value"><span>本金{{ apply.CAPITAL }}</span>利息{{ apply.INTEREST }}</div>
            </div>
          </div>
          <!-- </router-link> -->
        </div>
      </div>
      <!-- </div>
    </ab-scroller> -->
    </div>
  </div>
</template>

<script>
import Vue from 'vue';
import {gzDefaultPage} from '@/components/customize'

export default {
  name: "jk_repaymentPlan",
  props: {},
  components: {gzDefaultPage},
  data() {
    return {
      InstanceStatus: null,
      dataList: [],
      pageData: {}
    }
  },
  computed: {},
  watch: {},
  created() {
    let pageData = JSON.parse(this.$route.query.repaymentData)
    console.log("hahahahahah", this.pageData)
    this.getContractList(pageData);
  },
  mounted() {

  },
  methods: {
    //当前日期格式化
    dateFormat() {
      var date = new Date()
      var year = date.getFullYear()
      var month = date.getMonth() + 1 < 10 ?
        '0' + (date.getMonth() + 1) : date.getMonth() + 1
      var day = date.getDate() < 10 ? '0' + date.getDate() : date.getDate()
      // var hours = date.getHours() < 10 ? '0' + date.getHours() : date.getHours()
      // var minutes = date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes()
      // var seconds = date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds()
      return year + '-' + month + '-' + day
    },
    // 合同列表
    getContractList(pageData) {
      this.$toast.loading({
        duration: 0, // 持续展示 toast
        forbidClick: true,
        message: '加载中...'
      });
      let searchParam = {
        REPAY_SCHEDULE: pageData['REPAY_SCHEDULE'],//还款计划
        LENDING_RATE: pageData['LENDING_RATE'], //利率
        LOAN_AMT: parseInt(pageData['LOAN_AMT']), //本金
        LOAN_DEADLINE: pageData['LOAN_DEADLINE'], //期数
        DRAW_DATE: this.dateFormat(new Date()) //提款日期
      }
      this.baseService.post(this.__ctx + '/plugin/mobileBusiCenter/repaymentSchedule', searchParam).then(res => {
        this.$toast.clear();
        if (res.isOk) {
          this.dataList = res.data
          //  储存到本地
          // for (let i = 0; i < res.data.length; i++) {
          //   let item = res.data[i]
          //   let a = {
          //     CAPITAL: item['CAPITAL'],
          //     CURRENT_PERIOD: i + 1,
          //     INTEREST: item['INTEREST'],
          //     MONTHLY_DUE: item['MONTHLY_DUE'],
          //     REPAYMENT_TIME: item['REPAYMENT_TIME']
          //   }
          //   this.dataList.push(a)
          // }
          localStorage.setItem("repaymentPlanList", JSON.stringify(this.dataList))
        } else {
          this.$toast({
            icon: 'warning',
            message: res.msg
          });
        }
      }, function (status) {
        this.$toast.clear();
        if (status == !0) {
          this.$toast({
            icon: 'warning',
            message: '加载失败！' + status
          });
        }
      });
    },
  }
}
</script>

<style scoped lang="less">
/deep/ ._v-container {
  top: 4.2rem !important;
  height: calc(~'100vh - 8.6rem') !important;
}

/deep/ .van-nav-bar {
  .van-nav-bar__content {
    height: 4.4rem;
    line-height: 2rem;

    .van-icon {
      color: rgb(50, 50, 51);
      font-size: 2rem;
    }

    .van-nav-bar__title {
      font-size: 1.8rem;
    }
  }

  .allPlan {
    color: var(--primary-color);
    font-size: 1.4rem;
  }
}

[class*=van-hairline]::after {
  border: 0;
}

/*列表样式start*/
.loanBox {
  overflow-y: auto;
  height: calc(~'100vh - 4.4rem');
}

.product_main {
  background-color: #FFF;
  border-radius: 1.2rem;
  padding: 0 1.6rem;
  margin: 1.2rem;
}

.loan-list-style {
  box-sizing: border-box;
  overflow: hidden;
  border-bottom: 1px solid rgba(229, 230, 235, 0.5);
  padding: 1.6rem 0;

  .card-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 2.2rem;
    color: rgb(29, 33, 41);
    font-size: 1.6rem;
    font-weight: 500;

    .item-title {
      span {
        font-size: 1.2rem;
        line-height: 1.4rem;
      }

      .red {
        color: rgb(245, 63, 63);
        background: rgba(245, 63, 63, 0.1);
        border-radius: 0.8rem 0.8rem 0.8rem 0;
        padding: 0.2rem 0.6rem;
        margin-left: 0.4rem;
      }

      .green {
        color: rgb(0, 180, 42);
        background: rgba(0, 180, 42, 0.1);
        border-radius: 0.8rem 0.8rem 0.8rem 0;
        padding: 0.2rem 0.6rem;
        margin-left: 0.4rem;
      }
    }

    .item-value {
      font-size: 1.8rem;

      .price {
        span {
          // font-size: 1.8rem;
          font-weight: 500;
        }

        &.active {
          color: var(--primary-color);
        }
      }
    }

    &.principal {
      color: rgba(29, 33, 41, 0.54);
      font-size: 1.4rem;
      font-weight: 400;
      margin-top: 0.6rem;

      .item-title {


      }

      .item-value {
        //   color: rgb(29, 33, 41);
        font-size: 1.4rem;

        span {
          margin-right: 1.2rem;
        }
      }
    }
  }
}

.footer-box {
  font-size: 1.3rem;
  color: rgb(134, 144, 156);
  height: 2.7rem;
  text-align: center;
}

/*列表样式end*/
</style>
